@charset "utf-8";
@function v($p){
    @return $p/1920*100vw;
}
@import 'animate.css';

//section 中部
section{
    padding: 0 v(220);
    box-sizing: border-box;
    //顶部大图
    .section_top{
        position: relative;
        margin-bottom: v(58);
        img{width: 100%;}
        //中间的div
        .section_top_title{
            text-align: center;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-20%);
            >img{width: v(692);}
            a>button{
                color: white;
                border: 1px solid white; 
                background: transparent;
                margin-top: v(48);
                padding: v(23) v(69) v(21);}
        }
    }
    //中部横图区
    .section_mid{
        display: flex;
        justify-content: space-between;
        margin-bottom: v(100);
        li{
            .section_mid_pic{
                width: v(463);
                height: v(264);
                margin-bottom:v(42) ;
                img{width: 100%;
                    height: 100%;}
            }
              .section_mid_pic:hover >img{animation: flash 1s;}
            button{width: 100%;
                padding: v(18) 0;
                background: transparent;
                border-top: 1px solid #d9d7cb;
                border-bottom: 1px solid #d9d7cb;}
        }  
    }
    //底部竖图区
    .section_btm{
        padding: v(0) v(280);
        box-sizing: border-box;
        li{
            display: flex;
            justify-content: space-between;
            margin-bottom: v(64);
//          align-content: space-between;
            //左边图片
            .section_btn_pic{
                width: v(454);
                img{width: 100%;}
            }
            .section_btn_pic:hover >img{
                cursor: pointer;
                animation: pulse 1s;}
            //右边文字
            .section_btn_ctn{
                margin-left: v(10);
                p:nth-child(1){
                    font-size: 11px;
                    color: blue;}
                  p:nth-child(1):hover{color: red;cursor: pointer;}
                p:nth-child(2){font-size: 14px;
                    margin: v(21) 0 v(29);}
                  p:nth-child(2):hover{text-decoration: underline;cursor: pointer;}
                p:nth-child(3){font-size: 12px;
                    margin-bottom: v(55);}
                button{
                border: 1px solid black; 
                background: transparent;
                padding: v(21) v(73) v(20);}
                button:hover{
                    color: white!important;
                    background: gainsboro!important;
                    border: 1px solid transparent;
                }
            }
        }
    }
    //LOAD MORE
    .loadMore{
        width: 100%;
        text-align: center;
        margin-bottom:v(138) ;
        button{
            border: 1px solid black; 
            background: transparent;
            padding: v(23) v(95) v(21);}
        button:hover{
            background: black!important;
            color: white!important;
        }
    }
    
}
//底部图片
.section_footer{
    background: url(../img/5,8.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: v(816);
    position: relative;
    .section_footer_title>img{
        width:v(531);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(0%,-50%);
        margin: auto;
    }
}


//---------------------------media
@media (max-width:768px) {
    section{
        .section_btm {
            li{ 
                .section_btn_ctn {
                    margin-left: v(6);
                    p:nth-child(1){
                        font-size: 11px;
                        color: blue;}
                    p:nth-child(2){
                        font-size: 12px;
                        font-weight: bold;
                        margin: v(6) 0 v(6);}
                    p:nth-child(3){font-size: 12px;
                        margin-bottom: v(6);}
                    button{
                        font-size: 12px;
                        border: 1px solid black; 
                        background: transparent;
                        padding: v(5) v(35) v(5);}
                }
            }
        }
    }
}
@media (max-width:640px) {
    section{
        .section_btm {
            li{ 
                .section_btn_ctn {
                    margin-left: v(6);
                    p:nth-child(1){font-size: 10px;}
                    p:nth-child(2){font-size: 10px;}
                    p:nth-child(3){font-size: 10px;}
                    button{font-size: 10px;}
                }
            }
        }
    }
}